{% extends 'base.html' %}
{% load static %}
{% block title %}活动管理{% endblock %}
{% block extra_css %}
<link href="{% static 'dashboard/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">{% endblock %}
{% block modal %}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">活动创建</h4>
            </div>
            <div class="modal-body">
                <div style="width:100%;padding: 10px 20px 10px 20px">
                    <form id="cs_form">
                        {% csrf_token %}
                        活动名称: <input name="act_name" type="text" class="form-control"> <br>
                        活动简介: <br>
                        <textarea name="intro" cols="50" rows="3" class="form-control"></textarea> <br>
                        活动人数: <input name="capacity" type="number" min="1" max="99999"> <br>
                        发布者: {% firstof user.first_name user.username %} <br>
                        开始日期: <input name="start_date" type="text" id="datetimepicker0"
                            data-date-format="yyyy-mm-dd hh:ii"> <br>
                        结束日期: <input name="end_date" type="text" id="datetimepicker1"
                            data-date-format="yyyy-mm-dd hh:ii"> <br>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="cs_sub" type="button" class="btn btn-primary">创建</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block act_manager %}active{% endblock %}
{% block modal_button %}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    创建活动
</button>
{% endblock %}
{% block table_title %}<h3>我创建的活动</h3>{% endblock %}
{% block table_content %}
<thead>
    <tr>
        <th>#</th>
        <th>活动名称</th>
        <th>创建时间</th>
        <th>活动人数</th>
        <th>开始日期</th>
        <th>结束日期</th>
        <th>操作</th>
    </tr>
</thead>
<tbody>
    {% if mine_acts_list %}
    {% for act in mine_acts_list %}
    <tr>
        <td>{{ act.activity_ID }}</td>
        <td>{{ act.name }}</td>
        <td>{{ act.create_date }}</td>
        <td>{{ act.capacity }}</td>
        <td>{{ act.start_date|date:'Y-m-d H:i:s' }}</td>
        <td>{{ act.end_date|date:'Y-m-d H:i:s' }}</td>
        <td>
            <a class="btn btn-default btn-xs" href="{% url 'dashboard:act_info' act.activity_ID  %}"
                style="margin-top:0">管理</a>
        </td>
        <td>

        </td>
    </tr>
    {% endfor %}
    {% else %}
    <tr>
        <td>无数据</td>
    </tr>
    {% endif %}
</tbody>
{% endblock %}
{% block extra_js %}<script src="{% static 'dashboard/javascript/bootstrap-datetimepicker.min.js' %}"></script>
<script type="text/javascript">
    $('#datetimepicker0').datetimepicker();
    $('#datetimepicker1').datetimepicker();

    function sub(sub_btn, sub_form, red_url) {
        $(sub_btn).click(function () {
            $.ajax({
                type: 'post',
                dataType: 'html',
                url: red_url,
                data: $(sub_form).serialize(),
                contentType: "application/x-www-form-urlencoded",
                success: function (data) {
                    alert(data)
                    location.replace('/dashboard/act_manager/')
                }
            })
        })
    }

    sub('#cs_sub', '#cs_form', '/dashboard/create_activity/')
</script>{% endblock %}